<template>
	<view  v-if="netWork">
		<scroll-view scroll-y="true" style="height: 100vh;" @scroll="onpagescroll" @scrolltolower="onReachbottom"
			lower-threshold="100">
			<uni-swiper-dot class="uni-swiper-dot-box" :info="bannerDate" :current="swiperindex" mode="round"
				:dots-styles="dotsStyles" field="content">
				<swiper :current="swiperindex" class="banner-content" circular autoplay :interval="10000"
					@change="swiperchang">
					<swiper-item class="item-banner" v-for="(item,index) in bannerDate" @click="skip(item)"
						:key="index">
						<image :src="item.image" mode=""></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="top-loc-search" :style="{'background':scrollHeight>10?'#F5F7F8':'','zIndex':'10'}">
				<view class="location" @click="tochooseCity">
					<image src="/static/index/loc.png" mode=""></image>
					<view>{{userLocation.city}}</view>
				</view>
				<view class="search-content" @click="handleToSearch">
					<image src="/static/index/search.png" mode=""></image>
					<view class="input-box">
						请输入
					</view>
					<!-- <input type="请输入" @click="handleToSearch" disabled placeholder="请输入" placeholder-class="input-placeholder" /> -->
					<view class="search-btn" @click="handleToSearch">搜索</view>
				</view>
			</view>
			<view class="inner-pages">
				<view class="inner-box">
					<view class="hot-recommend-content" style="border: 0;">
						<view class="hot-title">
							<view class="hot-title-text" style="color: #E14800;">足浴按摩</view>
							<view class="more-text" @click="linkPage('/otherpages/massage/massageIndex')">更多</view>
						</view>
						<view class="recommend-list" v-if="false">
							<horizontalMassage :path="'index'" :isStyle="false" :list="massageList" ref="massage">
							</horizontalMassage>
						</view>
						<view class="recommend-list" v-if="true">
							<view class="recommend-list" v-if="massageList.length<1"
								style="text-align: center;margin: 0 auto;padding-bottom: 24rpx;">
								<ability-loading style="margin: 0 auto;" />
							</view>
							<view @click.stop="toMassageDEtail(massageList[index])" class="each-recommend-list-massage"
								v-if="massageList.length>0" :style="{'borderBottom':index==0?'1rpx solid #EFEFEF':'0'}"
								v-for="(item,index) in massageList" :key="index">
								<image class="each-recommend-list-img"
									:src="massageList[index]&& massageList[index].images[0]" mode="aspectFill"></image>
								<view class="each-recommend-list-right">
									<view class="title">
										<view class="title-text">{{massageList[index]&&massageList[index].title}}</view>
										<view class="zuikuai-time">
											<view>最快上门</view>
											<view class="time">30分钟</view>
										</view>
									</view>
									<view class="lines-3">
										<view class="price">
											{{massageList[index]&&massageList[index].price}}<text>元/次</text>
										</view>
										<view class="sold-num">
											已售{{massageList[index]&&massageList[index].buy_num}}
											<view class="lines"></view>
											好评{{massageList[index]&&massageList[index].high_opinion}}条
										</view>
									</view>
									<view class="lines-4">
										<view class="technician-list">
											<view
												@click.stop="linkPage('/otherpages/technician/technician?id='+items.id)"
												class="each-technician"
												v-for="(items,indexs) in massageList[index]&&massageList[index].technician"
												:key="indexs">
												<image :src="items.work_clothes_image" mode="aspectFill"></image>
												<view class="address">
													{{items.technician_nickname || items.real_name}}
												</view>
											</view>
											<view class="more"
												@click.stop="linkPage('/otherpages/technician/technicianList')">
												<view>更多</view>
												<image src="../../static/search/more.png" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view class="vip-content" v-if="bannerDate1.length" @click="toVip">
						<image :src="bannerDate1[0].image"></image>
					</view>


					<view class="hot-recommend-content" style="border: 0;">
						<view class="hot-title">
							<view class="hot-title-text" style="color: #E14800;">附近技师</view>
							<!-- <view class="more-text" @click="linkPage('/pages/vicinity/vicinity')">更多</view> -->
						</view>

						<view class="vicinity">
							<view class="item" v-for="(item,index) in list" @click="toDetail(item)">
								<image
									:src="item.person_images.length ? item.person_images[0] : item.work_clothes_image"
									mode="aspectFill"></image>
								<view class="text flex_r_between">
									<text>{{item.technician_nickname || item.real_name}}</text>
									<view class="address flex">
										<uni-icons type="location-filled" color="#939393" :size="16"></uni-icons>
										<text>{{(Number(item.juli) /1000).toFixed(2)}}km</text>
									</view>
								</view>
							</view>
							<view class="flex_r_around" style="width: 100%;padding: 10rpx 0 20rpx;">
								<u-loadmore :status="status" />
							</view>
						</view>
					</view>

				</view>
			</view>

		</scroll-view>

		<u-modal v-model="show" title="授权定位" content="将访问您的位置信息，为您推荐周边的生活服务" :confirm-style="{
				'backgroundColor':'#EAF2FE',
				'font-size': '30rpx',
				'font-weight': 600,
				'color': '#307BFB',
			}" show-cancel-button @confirm="onConfirmLocation" @cancel="onCancelLocation"></u-modal>


	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex' //引入mapState
	import Bignumber from '../../common/js/bignumber.js'
	export default {
		data() {
			return {
				dotsStyles: {
					backgroundColor: 'rgba(0, 0, 0, .3)',
					border: '1px rgba(0, 0, 0, .3) solid',
					color: '#fff',
					selectedBackgroundColor: '#fff',
					selectedBorder: '1px #fff solid',
					bottom: '30'
				},
				pupop: {
					'position': 'fixed',
					"top": '0',
					"right": '0',
					"left": '0',
					"bottom": '0',
				},
				Elsepupop: {
					'position': 'inherit'
				},
				current: 0,
				bannerDate: [],
				bannerDate1: [],
				swiperindex: 0,
				list: [],
				city: "",
				isIdentification: false,
				scrollHeight: 0,
				massageList: [],
				show: false,
				netWork: false,


				list: [],
				page: 1,
				last_page: 0,
				status: 'loading',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			}
		},
		filters: {
			haoping(text, option) {
				return (new Bignumber(text).div(new Bignumber(option))).times(100)
			}
		},
		onLoad() {
			let that = this
			this.getBanner('61').then(data => {
				this.bannerDate1 = data
			})
			this.getBanner(1).then(data => {
				this.bannerDate = data
			})
			this.getMassage()
			this.list = []
			this.page = 1
			this.getList()
			let os = uni.getDeviceInfo().platform
			if (os == 'ios') {
				// #ifdef APP
				uni.getNetworkType({
					success: network => {
						if (network.networkType == 'none') {
							uni.onNetworkStatusChange(function(res) {
								that.netWork = res.isConnected
							})
						} else {
							this.netWork = true
							uni.onNetworkStatusChange(function(res) {
								that.netWork = res.isConnected
							})
						}
					},
					fail: err => {
						this.netWork = true
						uni.onNetworkStatusChange(function(res) {
							that.netWork = res.isConnected
						})
					}
				})
				// #endif
				// #ifndef APP
				this.netWork = true
				this.getLocation()
				// #endif
			} else {
				this.netWork = true
				this.getLocation()
			}

			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight + 40;
		},
		watch: {
			userLocation: function(newvalue, oldvalue) {
				if (newvalue.latitude != oldvalue.latitude || newvalue.longitude != oldvalue.longitude) {
					this.getMassage()
					this.list = []
					this.page = 1
					this.getList()
				}
			},
			netWork: function(newvalue, oldvalue) {
				if (newvalue != oldvalue) {
					let os = uni.getDeviceInfo().platform
					if (os == 'ios') {
						this.getMassage()
						this.list = []
						this.page = 1
						this.getList()
						this.getLocation()
						this.getBanner(1).then(data => {
							this.bannerDate = data
						})
						this.getBanner('61').then(data => {
							this.bannerDate1 = data
						})
					}
				}
			},
		},
		onReachBottom() {

		},
		onShow() {},
		methods: {
			onReachbottom() {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			onpagescroll(e) {
				this.scrollHeight = e.detail.scrollTop
			},
			getList() {
				let that = this
				this.status = 'loading'
				this.request.httpTokenRequest({
					url: "service/getTechnicianByService",
					method: "get"
				}, {
					page: this.page,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
				}).then(res => {
					if (res.code == 0) {
						if (this.last_page > this.page){
							this.status = 'loadmore'
						}else { this.status = 'nomore' }
						this.last_page = res.data.last_page
						res.data.data.forEach(item => {
							this.list.push(item)
						})
					} else {
						this.$util.msg(res.msg)
						return
					}
				})
			},
			swiperchang(e) {
				this.swiperindex = e.detail.current;
			},
			tochooseCity() {
				uni.navigateTo({
					url: '/otherpages/chooseAddress/loactionList'
				})
			},
			skip(item) { //轮播图跳转
				// 1=通过id跳转活动 2=图片, 3=新闻资讯
				if (item.type == 1) {
					item.active_id = item.active_id.replace(/\s*/g, "")
					uni.navigateTo({
						url: item.active_id
					})
				}
			},
			async getBanner(location) {
				var urlData = {}
				var that = this
				await this.request.httpTokenRequest({
					url: "index/getBanner",
					method: "get"
				}, {
					location: location
				}).then(function(res) {
					if (res.code == 0) {
						urlData = res.data
					} else {}
				})
				return urlData
			},
			getType() {
				var urlData = {}
				var that = this
				this.request.httpTokenRequest({
					url: "index/getIndexPath",
					method: "get"
				}, {
					location: location
				}).then(function(res) {
					if (res.code == 0) {
						that.tabData = res.data
					} else {}
				})
				return urlData
			},
			getMassage() {
				let that = this
				if (!this.userLocation.longitude) {
					return
				}
				this.request.httpTokenRequest({
					url: "service/getServiceList",
					method: "get"
				}, {
					page: 1,
					lng: this.userLocation.longitude, //
					lat: this.userLocation.latitude,
				}).then(res => {
					if (res.code == 0) {
						that.massageList = res.data.data
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
			handleToSearch() {
				uni.navigateTo({
					url: '/otherpages/search/search'
				})
			},
			toMassageDEtail(item) {
				uni.navigateTo({
					url: '/otherpages/massage/massageDetail?id=' + item.id
				})
			},
			linkPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			getLocation() {
				this.default()
			},
			toVip() {
				this.request.httpTokenRequest({
					url: "user/center",
					method: "get"
				}, {}).then(res => {
					if (res.code == 0) {
						this.$util.toUrl('/otherpages/vip/vip')
					} else {
						this.$util.msg(res.msg)
						return
					}
				}, error => {})
			},
			onConfirmLocation() {
				this.$util.authorize('android.permission.ACCESS_FINE_LOCATION').then(res => {
					if (res == 1) {
						this.getUserLocation()
					} else {
						uni.setStorageSync('location_auth', 'denied')
						this.default()
					}
				})
			},
			onCancelLocation() {
				this.default()
				uni.setStorageSync('location_auth', 'denied')
			},
			default () {
				let that = this
				that.request.httpTokenRequest({
					url: "index/getLocationByIp",
					method: "get"
				}, {}).then(function(res) {
					uni.hideLoading()
					if (res.code == 0) {
						that.request.httpTokenRequest({
							url: "movie/getCityCode",
							method: "get"
						}, {
							name: res.data.city
						}).then(function(data) {
							uni.hideLoading()
							if (data.code == 0) {
								that.$store.commit('changeLocation', {
									cityCode: data.data.cityCode,
									cityName: data.data.cityName,
									regionCode: "",
									regionName: "",
									longitude: res.data.lng,
									latitude: res.data.lat,
								})
								let location = {
									longitude: res.data.lng,
									latitude: res.data.lat,
									province: res.data.province,
									city: res.data.city,
									cityname: res.data.city
								}
								that.$store.commit('changeUserLocation', location)
								// 首页上报用户地址信息
							} else {}
						})
					} else {}
				})
			},
			getUserLocation() {
				var that = this
				uni.showLoading({
					mask: true
				})
				this.$util.getLocation(res => {
					if (res) {
						this.request.httpTokenRequest({
							url: "movie/getCityCode",
							method: "get"
						}, {
							name: res.address.city
						}).then(function(data) {
							uni.hideLoading()
							if (data.code == 0) {
								that.$store.commit('changeLocation', {
									cityCode: data.data.cityCode,
									cityName: data.data.cityName,
									regionCode: "",
									regionName: "",
									longitude: res.longitude,
									latitude: res.latitude,
									name: res.address.poiName || res.address.street || '',
								})
							} else {}
						})
						let location = {}
						if (that.$util.phoneType() == 'ios') {
							var address = res.address
							address.poiName = res.address.street
							location = {
								latitude: res.latitude,
								longitude: res.longitude,
								province: res.address.city || '',
								city: res.address.city || '',
								cityname: res.address.city || '',
								address: address
							}
						} else {
							location = {
								latitude: res.latitude,
								longitude: res.longitude,
								province: res.address.province || '',
								city: res.address.city || '',
								cityname: res.address.city || '',
								address: res.address
							}
						}

						that.$store.commit('changeUserLocation', location)
						that.$store.commit('changeCurrentPosition', location)
					} else {
						that.default()
					}
				})
				uni.hideLoading()
			},
			toDetail(item) {
				if (item.is_data == 1) {
					uni.navigateTo({
						url: '/otherpages/technician/technician?id=' + item.id + '&juli=' + item.juli
					})
				} else {
					uni.navigateTo({
						url: '/otherpages/technician/technician?id=' + item.id
					})
				}
			},
		},
		computed: {
			...mapState({
				'userLocation': 'userLocation'
			}),
		}
	}
</script>
<style lang="scss">
	.min_height {
		min-height: 100vh;
	}

	.pages {
		padding-bottom: 140rpx;
	}

	.top-loc-search {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 0;
		position: fixed;
		top: 0;
		left: 0;
		padding: var(--status-bar-height) 30rpx 0;
		height: calc(var(--status-bar-height) + 80rpx);
		z-index: 99;
		width: 100vw;

		.location {
			max-width: 183rpx;
			height: 64rpx;
			background-color: rgba(255, 255, 255, .9);
			border-radius: 32rpx;
			line-height: 64rpx;
			display: flex;
			align-items: center;
			padding: 0 27rpx;
			box-sizing: border-box;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			image {
				width: 22rpx;
				height: 30rpx;
				margin-right: 13rpx;
				flex: 0 0 auto;
			}

			view {
				width: 150rpx;
				flex: 0 0 auto;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 40rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.search-content {
			width: 447rpx;
			display: flex;
			align-items: center;
			border-radius: 32rpx;
			padding: 7rpx 10rpx 7rpx 23rpx;
			background-color: rgba(255, 255, 255, .9);

			image {
				width: 30rpx;
				height: 30rpx;
				flex: 0 0 auto;
				margin-right: 20rpx;
			}

			.input-box {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
				width: 50%;
			}

			.input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
			}

			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				background: #EF5233;
				border-radius: 32rpx;
				backdrop-filter: blur(10px);
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #fff;
				font-family: PingFangSC, PingFang SC;
				margin-left: auto;
			}
		}
	}

	//轮播
	.uni-swiper-dot {
		position: absolute;
		bottom: 60rpx !important;
		left: 0;
		right: 0;
	}

	.banner-content {
		width: 100%;
		// border-radius: 10rpx;
		overflow: hidden;
		height: 454rpx;
		position: relative;

		.item-banner {
			width: 100%;
			height: 454rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.inner-pages {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx 0;
		margin-top: -30rpx;
		position: relative;
		// z-index: 99;
		box-sizing: border-box;
		background-color: #F7F8F9;
	}

	//vip
	.vip-content {
		margin: 20rpx 0;

		image {
			width: 100%;
			height: 181rpx;
		}
	}

	.inner-box {
		padding: 0 30rpx;
	}

	//推荐
	.hot-recommend-content {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(211, 211, 211, 0.12);
		border-radius: 28rpx;
		border: 1rpx solid #FFFFFF;
		padding: 0 30rpx;

		.hot-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 20rpx;

			.hot-title-text {
				font-size: 34rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #357650;
				line-height: 48rpx;
			}

			.more-text {
				font-size: $uni-font-size-base;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #949393;
				line-height: 33rpx;
			}
		}
	}

	.recommend-list {
		.price_jingqu {
			font-weight: 600;
			font-size: 26rpx;
			color: #EF5233;
			line-height: 37rpx;
			text-align: right;
			margin-top: 6rpx;
		}

		//按摩
		.each-recommend-list-massage {
			display: flex;
			padding: 30rpx 0;

			.each-recommend-list-img {
				width: 160rpx;
				height: 214rpx;
				flex: 0 0 auto;
				border-radius: 10rpx;
			}

			.each-recommend-list-right {
				flex-grow: 1;
				padding-left: 31rpx;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-text {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #0F0807;
						line-height: 42rpx;
					}

					.zuikuai-time {
						width: 186rpx;
						height: 32rpx;
						margin-left: 26rpx;
						background: url('https://qiniu-cdn.maeiyun.com/imgs/massage/bg.png')no-repeat;
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 12rpx;
						font-size: 20rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 28rpx;

						.time {
							color: #EF5233;
						}
					}
				}

				.lines-2 {
					font-size: $uni-font-size-base ;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #888889;
					line-height: 30rpx;
					margin-top: 10rpx;
				}

				.shop-lines {
					display: flex;
					align-items: flex-end;

					view {
						margin-left: 10rpx;
					}
				}

				.lines-3 {
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.price {
						font-size: 34rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #EF5233;
						line-height: 48rpx;
						display: flex;
						align-items: baseline;

						text {
							font-size: $uni-font-size-sm;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #EC2700;
							line-height: 25rpx;
						}
					}

					.sold-num {
						font-size: $uni-font-size-base;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #858587;
						line-height: 28rpx;
						display: flex;
						align-items: center;
						margin-left: auto;

						.lines {
							width: 2rpx;
							height: 20rpx;
							background-color: #DBDBDB;
							margin: 0 10rpx;
						}
					}
				}

				.lines-4 {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					.technician-list {
						display: flex;
						align-items: center;
						flex-grow: 1;

						.each-technician {
							width: 110rpx;
							height: 137.5rpx;
							flex: 0 0 auto;
							margin-right: 14rpx;
							position: relative;
							border-radius: 10rpx;
							overflow: hidden;

							.address {
								position: absolute;
								bottom: 0;
								left: 0;
								right: 0;
								font-size: 18rpx;
								color: #fff;
								background-color: rgba(0, 0, 0, 0.6);
								text-align: center;
								height: 24rpx;
								line-height: 24rpx;
							}

							image {
								width: 110rpx;
								height: 137.5rpx;
								border-radius: 10rpx;
							}
						}

						.more {
							font-size: $uni-font-size-sm;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #858587;
							line-height: 28rpx;
							margin-left: auto;
							text-align: center;

							image {
								width: 21rpx;
								height: 20rpx;
								margin-top: 10rpx;
							}
						}
					}
				}
			}
		}
	}

	.vicinity {
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;

		.item {
			border-radius: 20rpx;
			overflow: hidden;
			width: 48%;
			margin: 10rpx 0;
			border: 1rpx solid #C4C4C4;

			image {
				width: 100%;
				height: 480rpx;
			}

			.text {
				padding: 10rpx 22rpx;

				text {
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}

				.address {
					text {
						font-size: 22rpx;
						color: #939393;
						line-height: 30rpx;
					}
				}
			}
		}
	}
</style>